<template>
  <div id="cqd">
    <el-row>
      <div v-if="ycfxcode.mineName=='盖山一矿'">
        <vae-echarts height="30vh" :options="diaCurve.option1"></vae-echarts>
        <vae-echarts height="30vh" :options="diaCurve.option2"></vae-echarts>
        <vae-echarts height="30vh" :options="diaCurve.option3"></vae-echarts>
      </div>
      <div v-if="ycfxcode.mineName=='淮南矿业顾桥煤矿N3702运输巷'">
        <vae-echarts height="40vh" :options="diaCurve.option4"></vae-echarts>
      </div>
      <div v-if="ycfxcode.mineName=='淮南矿业谢桥矿2121(3)工作面'">
        <vae-echarts height="40vh" :options="diaCurve.option5"></vae-echarts>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    ycfxcode: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      diaCurve: {
        option1: {},
        option2: {},
        option3: {},
        option4: {},
        option5: {}
      },
      table: {
        data: [], //数据
        total: 0, //总条数
        currentPage: 1, //当前页码
        pageSize: 10 //每页条数
      }
    };
  },
  mounted() {
    this.initData();
    this.initData1();
    this.initData2();
  },
  created() {},
  methods: {
    initData() {
      this.request({
        url: "data/getData/3.18",
        method: "get"
      }).then(data => {
        this.initzhe(data.data);
      });

      this.request({
        url: "data/getData/3.19",
        method: "get"
      }).then(data => {
        this.initzhe1(data.data);
      });

      this.request({
        url: "data/getData/3.20",
        method: "get"
      }).then(data => {
        this.initzhe2(data.data);
      });
    },
    initData1() {
      this.request({
        url: "data/getData/3.30",
        method: "get"
      }).then(data => {
        this.initzhe4(data.data);
      });
    },
    initData2(){
       this.request({
        url: "data/getData/3.29",
        method: "get"
      }).then(data => {
        this.initzhe5(data.data);
      });
    },
    initzhe(data) {
      let y = {
        type: "value",
        name: "数值（%CH4）"
      };
      let t = {
        trigger: "axis",

        axisPointer: {
          type: "cross",
          animation: false,
          label: {
            backgroundColor: "#505765"
          }
        },

        formatter: function(param, ticket, cb) {
          let str = "";
          param
            ? param.forEach(function(item, i) {
                console.log({ item: item });
                str += item.name + item.value[1];
              })
            : null;
          return str;
        }
      };
      this.diaCurve.option1 = {
        title: {
          text: data.mnl.y[0].mineName + data.mnl.y[0].monitorType + "曲线图",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right"
        },
        //         padding: [5, 10, 5, 5], //设置标题内边距,上，右，下，左
        grid: {
          bottom: 80,
          right: "5%",
          left: "5%"
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: data.mnl.y[0].legend,

          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.mnl.x
          }
        ],
        yAxis: y,
        series: [
          {
            name: data.mnl.y[0].legend[0],
            type: "line",
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            data: data.mnl.y[0].data[0].monitorValue
          }
        ]
      };
    },
    initzhe1(data) {
      this.diaCurve.option2 = {
        title: {
          text: data.mnl.y[0].mineName + data.mnl.y[0].monitorType + "曲线图",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right"
        },
        //         padding: [5, 10, 5, 5], //设置标题内边距,上，右，下，左
        grid: {
          bottom: 80,
          right: "5%",
          left: "5%"
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: data.mnl.y[0].legend,

          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.mnl.x
          }
        ],
        yAxis: {
          type: "value",
          name: "数值（%CH4）"
        },
        series: [
          {
            name: data.mnl.y[0].legend[0],
            type: "line",
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            data: data.mnl.y[0].data[0].monitorValue
          }
        ]
      };
    },
    initzhe2(data) {
      this.diaCurve.option3 = {
        title: {
          text: data.mnl.y[0].mineName + data.mnl.y[0].monitorType + "曲线图",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right"
        },
        //         padding: [5, 10, 5, 5], //设置标题内边距,上，右，下，左
        grid: {
          bottom: 80,
          right: "5%",
          left: "5%"
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: data.mnl.y[0].legend,

          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.mnl.x
          }
        ],
        yAxis: {
          type: "value",
          name: "数值（%CH4）"
        },
        series: [
          {
            name: data.mnl.y[0].legend[0],
            type: "line",
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            data: data.mnl.y[0].data[0].monitorValue
          }
        ]
      };
    },
    initzhe4(data) {
      this.diaCurve.option5 = {
        title: {
          text: "淮南矿业谢桥矿2121(3)工作面T0甲烷",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right",
          bottom: "auto",
          padding: [20, 0, 0, 0]
        },
        grid: {
          bottom: 80,
          right: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: ["T0甲烷甲烷浓度趋势"],
          left: 10
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data[2]
          }
        ],
        yAxis: [
          {
            name: "co浓度(10*(-6))",
            type: "value"
            //             max: 500
          }
        ],
        series: [
          {
            name: "T0甲烷甲烷浓度趋势",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },

            data: data[0]
          }
        ]
      };
    },
    initzhe5(data) {
      let xdata =[];
      let seriesData1 = [],seriesData2 = [],seriesData3 = []; 
      data.qx1.forEach((item)=>{
        xdata.push(item.date);
        seriesData1.push(item.val);
      })
      data.qx2.forEach((item)=>{
        seriesData2.push(item.val);
      })
      data.qx3.forEach((item)=>{
        seriesData3.push(item.val);
      })
      this.diaCurve.option4 = {
        title: {
          text: "淮南矿业顾桥煤矿N3702运输巷瓦斯",
          left: "center",
          align: "right",
          bottom: "auto",
        },
        grid: {
          bottom: 80,
          right: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: ["原始曲线","解吸指标B","瓦斯指标A"],
          top: 20
        },

        xAxis: [
          {
            type: "category",
            axisLabel:{
              interval:10,
            },
            boundaryGap: false,
            axisLine: { onZero: false },
            data: xdata
          }
        ],
        yAxis: [
          {
            // name: "co浓度(10*(-6))",
            type: "value"
            //             max: 500
          }
        ],
        series: [
          {
            name: "原始曲线",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 1
            },
            data: seriesData1
          },
          {
            name: "解吸指标B",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 1
            },
            data: seriesData2
          },
          {
            name: "瓦斯指标A",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 1
            },
            data: seriesData3
          }
        ]
      };
    }
  }
};
</script>
<style lang="less" scoped>
#cqd /deep/ ::-webkit-scrollbar-thumb {
  background-color: #dddddd !important;
}
</style>